<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <title>装修管理系统</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/framework/jquery-1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
    <!-- 滚动条插件 -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/jquery.mCustomScrollbar.css}">
    <script th:src="@{/framework/jquery-ui-1.10.4.min.js}"></script>
    <script th:src="@{/framework/jquery.mousewheel.min.js}"></script>
    <script th:src="@{/framework/jquery.mCustomScrollbar.min.js}"></script>
    <script th:src="@{/framework/cframe.js}"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

</head>

<body>
<div class="cBody">
    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
</div>
</body>


<!--数据行按钮 -->
<div class="layui-btn-container" id="linebar" style="display: none">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</div>

<form id="setForm" class="layui-form" lay-filter="dataFrm" action="student-update" hidden="hidden">
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name"  class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input type="text" name="idcard"  class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitBut">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:inline="none">
    $(document).ready(function () {
        layui.use(['table', 'form', 'laydate'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            form.render();

            //常规用法
            laydate.render({
                elem: '#createdDate',
                format: 'yyyy-MM-dd',
                value: new Date()
            });

            var layTable = table.render({
                id: 'dataTable'
                , elem: '#dataTable'
                , url: 'student-list'
                , page: true
                , height: 'full-100'
                , limit: 15
                , limits: [10, 20, 30]
                , cols:
                    [[
                        {field: 'id', title: 'ID', sort: true}
                        , {field: 'name', title: '姓名'}
                        , {field: 'studentNo', title: '学号'}
                        , {field: 'clazzName', title: '班级'}
                        , {field: 'enrolmentDate', title: '年级'}
                        , {field: 'idcard', title: '身份证'}
                        , {field: 'province', title: '省'}
                        , {field: 'city', title: '市'}
                        , {fixed: 'right', title: '操作', toolbar: '#linebar', width: 200, align: 'center'}
                    ]]

            });

            <!-- 监听数据行中的事件 -->
            var mainIndex
            table.on('tool(dataTable)', function (obj) {
                var data = obj.data; //获得当前行数据
                var event = obj.event;// 获得lay-event对应的事件
                if (event === 'edit') {
                    mainIndex = layer.open({
                        type: 1,
                        title: '编辑',
                        content: $('#setForm'),
                        area: ['50%', '50%'],
                        success: function (index) {
                            form.val('dataFrm', data);
                        }
                    });
                } else if (event === 'del') {
                    window.location.href = "student-del?id="+data.id;
                }
            });

            $("#subBtn").click(function () {
                var title = $("input[name='title']").val();
                var isTop = $("select[name='isTop']").val();
                var isHot = $("select[name='isHot']").val();
                table.reload('dataTable', {
                    where: {
                        title: title,
                        isTop: isTop,
                        isHot: isHot
                    },
                    page: {
                        curr: 1
                    }
                });
            });
        });
    });

</script>
<script type="text/html" id="isHot">
    {{#  if(d.isHot=='1'){ }}
    是
    {{#  }else{ }}
    否
    {{# } }}
</script>
<script type="text/html" id="houseWay">
    {{#  if(d.houseWay=='0'){ }}
    整租
    {{#  }else{ }}
    合租
    {{# } }}
</script>
<script type="text/html" id="isTop">
    {{#  if(d.isTop=='0'){ }}
    否
    {{#  }else{ }}
    是
    {{# } }}
</script>
</html>